<%@ page language="java" import="java.util.*,com.vilen.util.*" pageEncoding="utf-8"%>
<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			<title>JAVA开发微信二维码扫一扫登录系统</title>
			<meta name="Keywords" content="">
			<meta name="description" content="">
			<link rel="stylesheet" href="css/animate.css">	
			
			<style type="text/css">
				*{margin:0;padding:0;}
				body{background: #666;font-size:12px;
				font-family:"微软雅黑";color:#666;}
				.btn{width:140px;height:30px;
				display: block;border: 1px solid #39B2E2;
				margin:150px auto;text-align:center;
				line-height:30px;text-decoration:none;
				font-size:14px;color:#39B2E2;border-radius:40px;}
				.btn:hover{background:#39B2E2;color:#fff;border-radius:40px;}
				.box{width:400px;height:300px;border:1px solid #000;background:#fff;border-radius:10px;box-shadow:1px 1px 35px #000;text-align:center;display:none;position: absolute;z-index:2;
				}
				.box h2{font-size:18px;font-weight:bold;line-height:60px;}
				.box p{line-height:100px;font-size:14px;}
				.yy{width:100%;height:100%;background:#000;position: absolute;left:0;top:0;
				opacity: 0.3;
				z-index:1;
				display: none;}
			</style>
	</head>
	<body>
		<a href="#" class="btn">微信登录</a>
		<div class="box">
			<h2>扫码登录 安全快捷</h2>
			<%
			    request.setCharacterEncoding("UTF-8");
			    String message = request.getParameter("message");

			    String fileName = "vilen_"+new Date().getTime()+".jpg";
			    String imgPath = request.getRealPath("/")+"/"+fileName;
			    QrcodeUtil.QrcodeImg2(message,imgPath);
                //out.print('<img src="'+fileName+'" alt="Vilen" width="140px" height="140px"/>');
			%>
			<img src="<%=fileName%>" alt="Vilen" width="140px" height="140px">
			<p>vilen的二维码</p>
		</div>

		<div class="yy">

		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js">
		</script>
		<script type="text/javascript">
			$(function(){
				$(".btn").click(function(){
					var left = ($(window).width() - 400) / 2 ;
					var top = ($(window).height() - 300) / 2;	
					$(".box").addClass("animated rollIn").show().css({left:left,top:top});
					$(".yy").css("opacity","0.3").show();
					
				});
				$(".yy").click(function(){
						$(".yy").css("display","none");
						var left = ($(window).width() - 400) / 2 ;
						var top = ($(window).height() - 300) / 2;	
						$(".box").show().animate({
							width:"-400px",
							height:"-300px",
							left:"-"+left+"px",
							top:"-"+top+"px"
						},500,function(){
							$(this).css({width:400,height:300}).css("display","none");
						});
					});
			});
		</script>
	</body>
</html>